<!--
 * @Author: lys
 * @Description: 
 * @Date: 2024-05-15 23:46:39
 * @LastEditors: lys
 * @LastEditTime: 2024-05-16 00:27:39
-->
<template>
  <div>
    <a-modal
      title="word预览"
      :width="1000"
      :visible="previewVisible"
      :footer="null"
      @cancel="closeModal()"
    >
      <div class="docx_container">
        <div class="home">
          <div ref="file"></div>
        </div>
        <div v-if="previewLoading" class="spinBox">
          <a-spin></a-spin>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
const docx = require("docx-preview");
import axios from 'axios'
import { previewFile } from '@/api/reply'
export default {
  name: 'PreviewWord',
  data () {
    return {
      previewLoading: false,
      previewVisible: false, // 预览word pic
    }
  },
  methods: {
    // 预览文件  可直接传链接
    showWrod(id) {
      this.handlePreview(id)
    },
    closeModal() {
      this.previewVisible = false
      this.$refs.file.innerHTML = ''
    },
    handlePreview(id) {
      this.previewVisible = true
      this.previewLoading = true
      // 服务器本地访问
      // let params = { id }
      // previewFile(params).then(resData => {
        // let fileUrl = process.env.VUE_APP_FILE_API + resData.url
        axios({
          method: "get",
          responseType: "blob", // 设置响应文件格式
          url: '/grade-evaluation-file/a08ee10d9678414381070a849a62b3ec.docx',
        }).then(({ data }) => {
          docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
        })
        .catch(e => {
          this.$refs.file.innerHTML = '<div style="color: red;text-align: center; opacity: .8;">加载文件异常</div>'
        })
        .finally(() => {
          this.previewLoading = false
        })
      // }).catch(e => {
      //   this.$refs.file.innerHTML = '<div style="color: red;text-align: center; opacity: .8;">加载文件异常</div>'
      //   this.previewLoading = false
      // })
    },
  }
}
</script>

<style lang="less" scoped>

::v-deep .docx-wrapper {
  padding: none;
  background: none;
}

::v-deep .docx {
  width: auto !important;
  padding: 0px !important;
  box-shadow: none !important;
}
::v-deep .ant-input-number-handler-wrap {
  display: none;
}
.docx_container {
  position: relative;
  min-height: 500px;
  .spinBox {
    display: flex;
    justify-content: center;
    background: #fff;
    width: 100%;
    height: 100%;
    padding-top: 150px;
  }
}
</style>
